<template>
  <div class="account_order">
    <div>
      <el-tabs v-model="state.tabIndex" class="demo-tabs" @tab-click="tabClickFUn">
        <el-tab-pane label="Все заказы" name=""></el-tab-pane>
        <el-tab-pane label="Ожидаемые платежи" name="waitbuyerpay"></el-tab-pane>
        <el-tab-pane label="Ожидание отгрузки" name="waitsellersend"></el-tab-pane>
        <el-tab-pane label="Ожидаемые товары" name="waitbuyerreceive"></el-tab-pane>
        <el-tab-pane label="Завершено" name="success"></el-tab-pane>
        <el-tab-pane label="После продажи" name="after_sales"></el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <div class="body_order_1 bCFF" v-if="!state.xinagqingShow">
        <Order_list @itemClick="itemClickFun" :orderList="orderList"></Order_list>
      </div>
    </div>
  </div>
  <div class="body_status_1 mTop16" v-if="state.xinagqingShow" >
    <Order_status :orderId="state.orderId"></Order_status>
  </div>
</template>

<script lang="ts" name="cart" setup>
import { reactive,ref } from 'vue'
import Order_list from '@/components/Order_list/Order_list.vue';//引入的订单列表的主键
import Order_status from '@/components/Order_status/Order_status.vue';
import {TabsPaneContext} from "element-plus";
import {getOrderGetList} from "@/api/api"
//引入的订单状态的主键
const state = reactive({
  tabIndex:'',
  xinagqingShow:false,
  orderId: 0
})

const itemClickFun = (item:any)=>{
  state.xinagqingShow = true
  state.orderId = item.order_id
  // alert(index)
}
const orderStatus = ref<string>('')
const tabClickFUn = (e:any) => {
  state.xinagqingShow = false
  orderStatus.value = e.paneName
  getList()
}
const orderList = ref<any>([])
function getList(){
  let params={
    page:1,
    limit:900,
    order_status:orderStatus.value
  }
  getOrderGetList(params).then((res:any)=>{
    orderList.value = res.returnData.list
  })
}
getList()
</script>

<style lang="less" scoped>
:deep(.el-tabs__item){
  font-family: Segoe UI, Segoe UI;
  font-weight: bold;
  font-size: 16px;
  //color: #333333;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-bottom: 23px;
}
:deep(.is-active){
  color: #0070E9;
}
:deep(.el-tabs__nav-wrap:after){
  //display: none;
}
.account_order{
  width: 1164px;
  //height: 1215px;
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  box-sizing: border-box;
  padding: 20px;
}
.divBox{

}
</style>
